<template>
	<div class="container2">
        <div class="logo-wrap">
			<img :src="logo" alt="" class="logo">
		</div>
		<div class="top-area" :style="'background-image: url('+ backImg +')'">
		</div>
        <div class="center-area">
            <div class="title">{{siteName}}</div>
            <div class="form-wrap">
                <el-steps :active="step" align-center>
                    <el-step title="注册账号"></el-step>
                    <el-step title="完善信息"></el-step>
                    <el-step title="完成"></el-step>
                </el-steps>
                <el-form :model="form" label-position="left" :rules="rules" ref="base-form" v-if="step == 1">
                    <el-form-item
                        class="channel-item"
                        label="邀请码"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="channel_code" :disabled="has_code" placeholder="请输入邀请码"></el-input>
                    </el-form-item>
                    <el-form-item
                        class="channel-item"
                        label="昵称"
                        prop="nickname"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.nickname" placeholder="请输入昵称"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="姓名"
                        prop="name"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.name" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="手机号"
                        prop="phone"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.phone" placeholder="请输入手机号"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="验证码"
                        prop="code"
                        label-width="120px"
                    >
                        <el-row type="flex" class="verification-code-box">
                            <el-col :span="24">
                                <el-input autocomplete="off" @keyup.enter.native="getVCode" v-model="form.code" placeholder="请输入短信验证码"></el-input>
                            </el-col>
                            <el-col :span="1"></el-col>
                            <el-col :span="10">
                                <el-button v-no-more-click:3000 :disabled="btnIsDisabled" type="primary" @click="getVCode" class="btn-login" style="margin-bottom: 0">{{VCodeText}}</el-button>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item
                        label="密码"
                        prop="password"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.password" :type="pwdType" placeholder="请输入6位数以上的密码"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="确认密码"
                        prop="confirm_password"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.confirm_password" :type="pwdType" placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="邮箱"
                        prop="email"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="form.email" placeholder="请输入邮箱" @keyup.enter.native="nextStep"></el-input>
                    </el-form-item>
                </el-form>
                <el-form :model="extre_form" label-position="left" :rules="extre_rules" v-if="step == 2" ref="extre-form" style="margin-bottom: 180px">
                    <el-form-item
                        label="从业年限"
                        prop="work_limit"
                        label-width="120px"
                    >
                        <el-select
                            v-model="extre_form.work_limit"
                            placeholder="请选择从业年限"
                        >
                            <el-option
                                v-for="item in 50"
                                :key="item"
                                :label="item"
                                :value="item">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="从业经验"
                        prop="experience"
                        label-width="120px"
                    >
                        <el-select
                            v-model="extre_form.experience"
                            placeholder="请选择是否有从业经验"
                            @change="changeSelect"
                        >
                            <el-option label="有" value="有"></el-option>
                            <el-option label="无" value="无"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="经验描述"
                        prop="describe"
                        label-width="120px"
                        v-if="extre_form.experience == '有'"
                    >
                        <el-input autocomplete="off" v-model="extre_form.describe" placeholder="请输入从业经验描述"></el-input>
                    </el-form-item>
                    <el-form-item
                        label="擅长领域"
                        prop="territory"
                        label-width="120px"
                    >
                        <!-- <el-input v-model="extre_form.territory" placeholder="请输入您的擅长领域"></el-input> -->
                        <el-select v-model="extre_form.territory" multiple placeholder="请选择您的擅长领域" filterable>
                            <el-option
                                v-for="(item, index) in territory_options"
                                :key="index"
                                :value="item.label"
                                :label="item.label"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item
                        label="从业机构"
                        prop="organization"
                        label-width="120px"
                    >
                        <el-input autocomplete="off" v-model="extre_form.organization" placeholder="请输入您的从业机构" @keyup.enter.native="register"></el-input>
                    </el-form-item>
                </el-form>
                <div v-if="step == 2" class="tl">
                    <el-checkbox v-model="check_provisions">我已阅读并同意</el-checkbox>
                    <el-button class="p0" type="text" @click="show">相关服务条款和隐私政策</el-button>
                </div>
                <div class="btn-wrap" v-if="step != 3">
                    <el-button v-no-more-click:3000 type="primary" class="btn-login" @click="step = 1" v-if="step == 2">上一步</el-button>

                    <el-button v-no-more-click:3000 type="primary" :class="['btn-login', {'op_5': !check_provisions}]" @click="register" v-if="step == 2" :disabled="!check_provisions">注册</el-button>
                    <el-button v-no-more-click:3000 type="primary" class="btn-login" @click="nextStep" v-if="step == 1">下一步</el-button>
                </div>
                <div class="success-container" v-if="step == 3">
                    <h2 class="mb10">注册成功！</h2>
                    <p class="mb10">{{time_text}}秒后跳转登入界面</p>
                    <div class="progress">
                        <el-progress type="circle" :percentage="percentage" :show-text="false"></el-progress>
                        <span class="text">{{time_text}}</span>
                    </div>
                </div>
            </div>
        </div>
		<div class="bottom-area">
			<div class="copy-right">{{ record }}</div>
		</div>
        <provisions ref="provisions"></provisions>
	</div>
</template>

<script>
	import {login,codeLogin} from '~/api/login'
    import aes from '~/util/aes.js'
    import { validatePhone, validateEmail } from '~/util/index'
    import provisions from './components/provisions'
	import logo from '~/assets/img/head_logo.png'
    import { RECORD, SITE_NAME_PY, SITE_NAME } from '~/util/config'
	export default {
		head: {
			title:`注册-${SITE_NAME}管理系统`
        },
        components: {
            provisions
        },
		data() {
            let validateName = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请输入姓名"))
                } else if (!(/^[\u4e00-\u9fa5A-Za-z]+$/.test(this.form.name))) {
                    callback(new Error("请输入正确的姓名"))
                } else {
                    callback()
                }
            }
            let validateCode = (rule, value, callback) => {
                if (this.form.code === '' || !(/^[0-9]{6}$/.test(this.form.code))) {
                    callback(new Error("请输入正确的验证码"))
                } else {
                    callback()
                }
            }
            let validatePass = (rule, value, callback) => {
                if (value === "") {
                    callback(new Error("请再次输入密码"))
                } else if (value !== this.form.password) {
                    callback(new Error("两次输入密码不一致!"))
                } else {
                    callback()
                }
            }
			return {
                check_provisions: false,
				logo: logo,
                percentage: 100,
                time_text: 3,
                Timer: '',
                Timer2: '',
                backImg: require('~/assets/img/order-login.jpg'),
                step: 1,
                VCodeText: "获取验证码",
                btnIsDisabled: false,
                territory_options: [],
                pwdType: 'text',
                form: {
                    name: '',
                    phone: '',
                    code: '',
                    password: '',
                    confirm_password: '',
                    email: '',
                    nickname: ''
                },
                rules: {
                    name: [{required: true, trigger: 'blur', validator: validateName}],
                    phone: [{required: true, validator: validatePhone, trigger: 'blur'}],
                    code: [{required: true, trigger: 'blur', validator: validateCode}],
                    password: [
                        {required: true, trigger: 'blur', message: '请输入密码'},
                        {min: 6, message: '请填写6位及以上的密码', trigger: 'blur' }
                    ],
                    confirm_password: [{required: true, validator: validatePass, trigger: 'blur'}],
                    email: [{required: true, validator: validateEmail, trigger: 'blur'}],
                    // nickname: [{required: true, trigger: 'blur', trigger: 'blur'}],
                },
                extre_form: {
                    work_limit: '',
                    experience: '有',
                    territory: [],
                    describe: ''
                },
                extre_rules: {
                    work_limit: [{required: true, trigger: 'change', message: '请输入工作年限'}],
                    experience: [{required: true, trigger: 'blur', message: '请选择是否有工作经验'}],
                    describe: [{required: true, trigger: 'blur', message: '请输入工作经验描述'}],
                    territory: [{required: true, trigger: 'blur', message: '请输入擅长领域'}]
                },
                channel_code: '',
                has_code: false,
                siteName: SITE_NAME,
				siteNamePY: SITE_NAME_PY,
      	        record: RECORD
			}
        },

        watch: {
            time_text(val) {
                if (val == 0) {
                    clearInterval(this.Timer)
                    this.$router.push('/order/login')
                }
            },
            percentage(val) {
                if (val < 0) {
                    clearInterval(this.Timer2)
                    this.percentage = 0
                }
            },
            form: {
                handler: function (val) {
                    // 解决浏览器默认填充密码框问题
                    if (val.password != "" || val.confirm_password != "") {
                        this.pwdType = 'password'
                    }
                },
                deep: true,
                immediate: true,
            }
        },

        created() {
            if (this.$route.query.code) {
                this.channel_code = this.$route.query.code
                this.has_code = true
            }
            this.getSelect()
        },
        mounted() {
        },

		methods: {
            show() {
                this.$refs['provisions'].dialogVisible = true
            },
            handleChange(data) {
                console.log(data)
            },
            getSelect() {
                this.$axios.get('/api/agent/trademark_list').then(res => {
                    if (res.data.code == 200) {
                        let data = res.data.data
                        this.territory_options = data.map(v => {
                            v.label = v.name.split('-')[1]
                            v.value = v.label
                            return v
                        })
                    } else {
                        this.$message({
                            type: 'error',
                            message: '获取擅长领域选项失败'
                        })
                    }
                }).catch(e => {
                    console.log(e)
                })
            },
            changeSelect(val) {
                if (val == '无') {
                    this.extre_rules.describe[0].required = false
                } else {
                    this.extre_rules.describe[0].required = true
                }
            },
            register() {
                this.$refs['extre-form'].validate(valid => {
                    if (valid) {
                        let params = Object.assign(this.form, this.extre_form)
                        delete params.confirm_password
                        if (params.experience == '无') {
                            delete params.experience
                        } else {
                            params.experience = params.describe
                        }
                        // 判断是不是推荐注册
                        if (this.$route.query.channel_pid) {
                            params.channel_pid = this.$route.query.channel_pid
                        }
                        params.territory = params.territory.toString()
                        delete params.describe
                        if (this.channel_code) {
                            params.invitation_code = this.channel_code
                        }

                        if (this.form.nickname == '') {
                            delete params.nickname
                            console.log(params)
                        }  else {

                        }
                        this.$axios.post('/api/agent', params).then(res => {
                            if (res.data.code == 200) {
                                this.step = 3
                                this.Timer = setInterval(() => {
                                    this.time_text --
                                }, 1000);
                                this.Timer2 = setInterval(() => {
                                    this.percentage = this.percentage - 3.3334
                                }, 100)
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.data.message
                                })
                            }
                        })
                    }
                })
            },
            nextStep() {
                this.$refs['base-form'].validate(valid => {
                    if (valid) {
                        this.step = 2
                    }
                })
            },
            getVCode() {
				if ((/^1[3456789]\d{9}$/.test(this.form.phone))) {
					let num = 60;
                    this.btnIsDisabled = true;
                    let that = this
					let timer = setInterval(function() {
						that.VCodeText = num + "秒后可重新发送";
						num -= 1;
						if (num < 0) {
							that.VCodeText = "获取验证码";
							that.btnIsDisabled = false;
							clearInterval(timer);
						}
                    }, 1000);
					this.$axios.post('/api/captcha', {
						phone: this.form.phone,
                        type: 1,
                        guard: 'agent'
					}).then(res => {
						if (res.data.code == 200) {
							this.$message({
								message: "验证码发送成功！",
								type: 'success'
							});
						} else {
							this.VCodeText = "获取验证码";
							this.btnIsDisabled = false;
							clearInterval(timer);
							this.$message({
								message: res.data.message,
								type: 'error'
							});
						}
					})
				} else {
					this.$message({
						message: "手机号不能为空且格式不能有误",
						type: 'warning'
					});
				}
			}
        }
	}
</script>


<style lang="less">
	.container2 {
		-webkit-display:flex;
		display:flex;
		flex-direction: column;
		-webkit-flex-direction: column;
        margin: 0 auto;
        background: white;
        min-height: 100vh;
        position: relative;
		.logo-wrap {
			height: 80px;
			box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
			padding-top: 5px;
			padding-left: 20px;
			box-sizing: border-box;
			.logo {
				display: block;
				height: 60px;
			}
		}
		.top-area {
			width: 100%;
			height: 300px;
			background-size: 100% 100%;
			background-repeat: no-repeat;
			flex: 1.25;
			-webkit-flex: 1.25;
            z-index: 9;
            -webkit-filter: blur(4px);
            -moz-filter: blur(4px);
            -o-filter: blur(4px);
            -ms-filter: blur(4px);
            filter: blur(4px);

        }
        .center-area {
            z-index: 9;
            width: 515px;
            position: absolute;
            left: 50%;
            transform: translate(-50%, -50%);
            top: 50%;
            text-align: center;
            .channel-item {
                .el-form-item__label {
                    padding-left: 8px;
                }
            }
            .title {
                color: #fff;
                font-size: 30px;
                font-weight: bold;
                letter-spacing: 2px;
                margin-bottom: 20px;
            }
            .form-wrap {
                background-color: #fff;
                padding: 25px;
                border-radius: 4px;
                height: 660px;
                position: relative;
                &:before, &:after{
                    position:absolute;
                    content:"";
                    bottom:12px;left:15px;top:80%;
                    width:45%;
                    background:#ccc;
                    z-index:-1;
                    -webkit-box-shadow: 0 20px 15px #ccc;
                    -moz-box-shadow: 0 20px 15px #ccc;
                    box-shadow: 0 20px 15px #ccc;
                    -webkit-transform: rotate(-6deg);
                    -moz-transform: rotate(-6deg);
                    transform: rotate(-6deg);
                }
                &:after{
                    -webkit-transform: rotate(6deg);
                    -moz-transform: rotate(6deg);
                    transform: rotate(6deg);
                    right: 15px;left: auto;
                }
                .el-steps {
                    margin-bottom: 10px;
                    .el-step {
                        .el-step__title.is-process {
                            font-weight: normal;
                            color: #C0C4CC;
                        }
                        .el-step__head.is-process {
                            color: #C0C4CC;
                            border-color: #C0C4CC;
                        }
                        .el-step__head {
                            .el-step__icon {
                                .el-step__icon-inner {
                                    padding-right: 1px;
                                }
                            }
                        }
                    }
                }
                .success-container {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    .progress {
                        position: relative;
                        .text {
                            position: absolute;
                            font-size: 30px;
                            font-weight: bold;
                            color: #409EFF;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                        }
                    }
                }
            }
            .btn-wrap {
                width: calc(100% - 50px);
                position: absolute;
                display: flex;
                bottom: 25px;
            }
            .btn-login {
                flex: 1;
                width: 100%;
                background-image: linear-gradient(to left, #41E5EF, #10A2EB);
                margin-bottom: 0;
                border-color: transparent;
                &.op_5 {
                    opacity: 0.5;
                }
            }
            .el-form {
                .el-select, .el-cascader {
                    width: 100%;
                }
                .el-form-item {
                    &.over-line {
                        .el-form-item__label {
                            line-height: 20px;
                        }
                    }
                }
            }
        }
		.bottom-area {
			width: 100%;
			flex:1;
			-webkit-flex: 1;
			background-color: rgb(235, 244, 255);
			position: relative;
			.copy-right {
				position: absolute;
				bottom: 40px;
				width: 100%;
				text-align: center;
			}
		}
	}
	.f16 {
		font-size: 16px;
	}
</style>



